/*
  学习目标：JSX-插值表达式 - 引用数据类型:
  语法: {表达式}
  表达式:
  1.✅ 变量
  2. ✅基本数据类型: string  number boolean undefined  null
  3. 引用数据类型: object  array function
  4. 其它: 三元/ 逻辑且 /JSX
  
*/

import React from 'react';
import ReactDOM from 'react-dom';

// object
// 💥对象不能直接放在{}中

const person = {
  type: 'div',
  name: 'zs',
  age: 18,
  children: {
    name: 'xzs',
    age: 3,
  },
};

// array
// 💥 数组内的每项元素, 都会当做一个个dom节点, 直接渲染出来
const list = [1, 2, 3];
const list2 = [<span>1</span>, <i>2</i>, <b>3</b>];
const divNode = (
  <div>
    <h1>{person.name}</h1>
    <h2>{list}</h2>
    <h3>{list2}</h3>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
